<template>
  <el-tabs
    type="border-card"
    style="margin: 20px"
    v-model="activeName"
    @tab-click="handleClick"
  >
    <el-tab-pane label="全部公告" name="first">
      <table-item v-if="isFirst"></table-item>
    </el-tab-pane>
    <el-tab-pane label="系统公告" name="second">
      <table-item :type="1" v-if="isSecond"></table-item>
    </el-tab-pane>
    <el-tab-pane label="标案公告" name="third">
      <table-item :type="2" v-if="isThird"></table-item>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import tableItem from "./components/tableItem.vue";
export default {
  components: { "table-item": tableItem },
  data() {
    return {
      activeName: "first",
      isFirst: true,
      isSecond: false,
      isThird: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.isFirst = true;
        this.isSecond = false;
        this.isThird = false;
      } else if (tab.name === "second") {
        this.isFirst = false;
        this.isSecond = true;
        this.isThird = false;
      } else if (tab.name === "third") {
        this.isFirst = false;
        this.isSecond = false;
        this.isThird = true;
      }
    },
  },
};
</script>

<style>
</style>